/*
 * @Author: your name
 * @Date: 2021-10-05 11:05:48
 * @LastEditTime: 2021-12-07 11:18:24
 * @LastEditors: Shentong
 * @Description: In User Settings Edit
 * @FilePath: /distribution/src/pages/coupon/index.tsx
 */
import React, { useState, useEffect, useCallback, Fragment } from 'react'
import Taro, { useDidShow, useRouter } from '@tarojs/taro'

import { connect } from 'react-redux'

import { AtIcon, AtFloatLayout } from 'taro-ui'
import { View, Image, ScrollView, Swiper, SwiperItem } from '@tarojs/components'
import CommentItem from '@/components/custom/commentItem'
import NavBar from '@/src/components/custom/navBar'
import NoMore from '@/components/custom/no-more'

import FlyBall from '@/components/custom/flyBall'

import SelectedIcon from '@/src/assets/detail/selected.png'
import AppIcon from '@/src/assets/icon/appIcon.jpeg'
import myCard1Image from '@/src/assets/detail/my-card1.png'
import myCard2Image from '@/src/assets/detail/my-card2.png'
import LocationIcon from '@/src/assets/icon/locationIcon.png'
import Zhaopin from '@/src/assets/detail/zhaopin.png'
import Timestamp from '@/src/assets/detail/timestamp.png'
import NoDataIcon from '@/src/assets/icon/noDataIcon.png'
import PinIcon from '@/src/assets/icon/pin.png'

import { getGoods, getShopInfo, getShopSet } from '@/api/goods'
import { getIsCollect, addCollect, cancelCollect } from '@/api/user'

import { gettlement, shopComment } from '@/api/order'
import { showToast } from '@/utils/index'

import styles from './index.module.scss'

const Detail = ({ dispatch }) => {
  const tabList = ['点菜', '评价', '商家']
  const [isCollect, setIsCollect] = useState<boolean>(false)
  const [openCoupon, setOpenCoupon] = useState<boolean>(false)
  const [shopInfo, setShopInfo] = useState<any>({
    // plaqueImageUrl: storeImage,
    // shopImageUrl: avatarImage,
    plaqueImageUrl: '',
    shopImageUrl: '',
    shopName: '',
    shopNotice: '',
    activities: [],
    detailAddress: '',
    shopPhone: '',
    businessBeginTime: '',
    businessEndTime: '',
    hasJobPosition: false,
    businessStatus: 1,
    startPrice: 0
  })
  /**
   * @description 规格相关
   */
  const [openSpecs, setOpenSpecs] = useState<boolean>(false)
  // 当前操作的商品
  const [currentGoods, setCurrentGoods] = useState<any>({})
  // 购物车相关
  const [cartFormData, setCartFormData] = useState<any>([])
  const [cartTotalPrice, setCartTotalPrice] = useState<number>(0)
  const [cartTotalNum, setCartTotalNum] = useState<number>(0)
  // Tabs和商品列表相关
  const [currentIndex, setCurrentIndex] = useState<number>(0)
  const [menuIndex, setMenuIndex] = useState<number>(0)
  const [scrollDom, setScrollDom] = useState<string>('')
  const [swipeDomTop, setSwipeDomTop] = useState<number>(0)
  const [cardScrollTop] = useState<number>(0)
  // 显示购物车弹框
  const [showCartLayout, setShowCartLayout] = useState<boolean>(false)
  const [menuList, setMenuList] = useState<any>([])
  // 显示商品大图详情
  const [showBigShopDetail, setShowBigShopDetail] = useState<boolean>(false)
  const [bigShopTop, setBigShopTop] = useState<number>(0)
  const [bigCurrentGoods, setBigCurrentGoods] = useState<any>({})
  // 商户评价显示信息
  const [shopCommentList, setShopCommentList] = useState<any>([])
  const [pageSize] = useState(20)
  const [pageNo, setPageNo] = useState(1)
  // 是否加载完所有数据
  const [isLoadFinish, setIsloadFinish] = useState(false)
  // 招聘信息模态框
  const [showRecruitModal, setShowRecruitModal] = useState(false)

  // 抛物线小球
  const [launchXY, setLaunchXY] = useState({})
  const [targetXY, setTargetXY] = useState({x:0,y:0})
  const [showBall, setShowBall] = useState(false)
  // 购物车抖动
  const [cartShark, setCartShark] = useState(false)

  // shopId: '1067621941743255552'
  // 选择下单方式模态框
  const [showOrderWay, setShowOrderWay] = useState(false)
  // 下单方式
  const [orderWay, setOrderWay] = useState(0)
  // 下单方式列表
  const [orderWayList, setOrderWayList] = useState([])
  // 跳转到支付页面时所需要的数据
  const [submitCartInfo, setSubmitCardInfo] = useState({})
  const routerParams = useRouter().params

  // 商户评价列表
  const getShopComment = useCallback(() => {
    if (!routerParams.shopId) return

    const params = {
      shopId: routerParams.shopId,
      pageSize,
      pageNo
    }
    shopComment(params).then(res => {
      const {
        data: { records = [], lastPage = false }
      } = res
      records.forEach(item => {
        const { cellPhone } = item
        if (cellPhone && /^1(3|4|5|6|7|8|9)\d{9}$/.test(cellPhone)) {
          const arr = cellPhone.split('')
          arr.splice(3, 4, '*', '*', '*', '*')
          item.cellPhone = arr.join('')
        }
      })
      setIsloadFinish(lastPage)
      setShopCommentList([...shopCommentList, ...records])
    })
  }, [pageNo, pageSize, routerParams.shopId])

  // 获取商品
  const getGoodsInfo = useCallback(async () => {
    Taro.showLoading({ title: '加载中...', mask: true })
    try {
      // 商户商品信息
      let { data: MenuList = [] } = await getGoods(routerParams)
      if (MenuList.length) {
        MenuList = MenuList.filter(item => item.goods.length)
        setMenuList(MenuList)
      }
      // 商户基本信息
      const { data: ShopInfo = {} } = await getShopInfo(routerParams)
      setShopInfo(ShopInfo)
      // 用户收藏状态
      const { data: _isCollect } = await getIsCollect(routerParams)
      setIsCollect(_isCollect)
      Taro.hideLoading()
    } catch (error) {}
  }, [routerParams])

  // 获取订单配送方式列表
  const getShopSetList = async () => {
    try {
      const res = await getShopSet(routerParams)
      return res.data || []
    } catch (error) {
      return []
    }
  }

  /**
   * @description 优惠活动的icon标志
   */
  const flag = (type = 0) => {
    switch (type) {
      case 0:
        return <View className={styles.first}>首</View>
      case 1:
        return <View className={styles.present}>赠</View>
      case 2:
        return <View className={styles.cut}>减</View>
    }
  }
  /**
   * @description 点击返回事件
   */
  const navibarBackHandle = () => {
    Taro.navigateBack()
  }
  /**
   * @description 跳转到订单确认页面
   */
  const goSubmitOrderPage = async (cartInfo) => {
    Taro.removeStorageSync('cartInfo')

    try {
      const { data = null } = await gettlement(cartInfo)
      if (data) {
        // 准备Form表单数据存入storage,订单详情页需要的数据
        Taro.setStorageSync('cartInfo', cartInfo)
        Taro.navigateTo({
          url: `/pages/submitOrder/index?shopId=${routerParams.shopId}`,
          complete: () =>
            setTimeout(() => {
              resetData()
            }, 1000)
        })
      }
    } catch (error) {

    }
  }
  /**
   * @description 跳转详情页前的校验
   */
   const validateBeforSubmit = async (cartInfo) => {
    try {
      const orderWayData = await getShopSetList()
      // 有2种以上配送方式 选择配送方式，没有直接跳转页面
      if (Array.isArray(orderWayData) && orderWayData.length) {
        setOrderWayList(orderWayData)
        setOrderWay(orderWayData[0].typeId)
        setShowOrderWay(true)
      } else {
        goSubmitOrderPage(cartInfo)
      }
    } catch (e) {
      console.error('获取配送方式失败:', e)
    }
  }
  /**
   * @description 去结算
   */
  const submitOrder = async () => {
    if (!cartFormData.length) return showToast('请先选择商品哟~')

    if (!shopInfo.businessStatus) return showToast('商铺未营业~')

    const cartList: any = cartFormData.map(item => {
      return {
        goodsId: item._goodsSId,
        goodsNum: item._goodsNum,
        goodsSpecId: item._goodsSpecSId,
        propertys: item._propertys.map(p => {
          return {
            propertyId: p.propertySId,
            propertyValueId: p.propertyValuesSId
          }
        })
      }
    })

    const cartInfo = {
      items: cartList,
      shopId: routerParams.shopId,
      userCouponId: '', // 用户优惠券id ,
      userRedPacketId: '', // 用户红包id
      deliveryType: 1, //  配送类型（送货到家：1，固定取餐：2）
      diningPointsId: 1 // 固定取餐点Id
    }

    setSubmitCardInfo(cartInfo)

    validateBeforSubmit(cartInfo)
  }
  /**
   * @description 重置数据
   */
  const resetData = () => {
    setShowOrderWay(false)
    setOrderWay(0)
    setOrderWayList([])
    setCartFormData([])
  }
  /**
   * @description 自定义导航栏，传入的子元素
   */
  const renderCenter = (
    <View className={styles.goBack} onClick={navibarBackHandle}>
      <AtIcon
        className={styles.arrow}
        value='chevron-left'
        size='30'
        color='#ffffff'
      ></AtIcon>
    </View>
  )
  /**
   * @description 点击菜单Tab按钮
   */
  const clickMendTab = index => {
    setScrollDom(`cardTitle-${index}`)
    setMenuIndex(index)
  }
  /**
   * @description 点击规格按钮
   */
  const clickSpecsButton = item => {
    setOpenSpecs(true)
    setCurrentGoods(item)
  }
  /**
   * @description 规格中选择属性标签缓存数据
   * @param {object} goodsSId 商品id，当只有此id时初始化回显数据
   * @param {object} valueSId 属性id，当只有此id时更新属性数据
   * @param {object} specSId 规格id，当只有此id时更新规格数据
   */
  const handleSpecData = ({
    goodsSId = '',
    valueSId = '',
    specSId = ''
  } = {}) => {
    if (currentGoods) {
      // 选中的label的总价格
      let _price = currentGoods._price || currentGoods.goodsPrice || 0
      // label文案数组用于购物车中显示描述
      let _labels: any = currentGoods._labels || []
      let _properties = currentGoods._properties || []
      let _specs = currentGoods._specs || []
      let _goodsSId = goodsSId || currentGoods._goodsSId || 0
      let _goodsSpecSId = specSId || currentGoods._goodsSpecSId || 0
      let _propertys =
        currentGoods._propertys && currentGoods._propertys.length
          ? [...currentGoods._propertys]
          : []
      if (goodsSId) {
        // 第一次打开弹窗时商品数据中加入check选项
        if (currentGoods.properties) {
          _properties = currentGoods.properties.map((i, j) => {
            i.propertyValues = i.propertyValues.map((v, w) => {
              if (w === 0) {
                v.isCheck = true
                _labels.push(v.propertyValue)
                _propertys[j] = {
                  propertySId: i.propertySId,
                  propertyValuesSId: v.valueSId
                }
              } else {
                v.isCheck = false
              }
              return v
            })
            return i
          })
        }
        if (currentGoods.specs) {
          _specs = currentGoods.specs.map((i, j) => {
            if (j === 0) {
              i.isCheck = true
              _price = i.specPrice
              _labels.push(i.specName)
              _goodsSpecSId = i.specSId
            } else {
              i.isCheck = false
            }
            return i
          })
        }
      } else if (valueSId) {
        // 更改属性标签中选中的属性
        if (currentGoods.properties) {
          _properties = currentGoods.properties.map((i, j) => {
            let isInPropertyValues = i.propertyValues.findIndex(item => {
              return valueSId === item.valueSId
            })
            if (isInPropertyValues > -1) {
              i.propertyValues = i.propertyValues.map(v => {
                if (valueSId === v.valueSId) {
                  v.isCheck = true
                  _labels[j] = v.propertyValue
                  _propertys[j] = {
                    propertySId: i.propertySId,
                    propertyValuesSId: v.valueSId
                  }
                } else {
                  v.isCheck = false
                }
                return v
              })
            }
            return i
          })
        }
      } else if (specSId) {
        // 更改规格标签中选中的属性
        if (currentGoods.specs) {
          _specs = currentGoods.specs.map((i, j) => {
            if (specSId === i.specSId) {
              i.isCheck = true
              _price = i.specPrice
              _labels[_properties.length + j] = i.specName
              _goodsSpecSId = i.specSId
            } else {
              i.isCheck = false
            }
            return i
          })
        }
      }
      setCurrentGoods({
        ...currentGoods,
        _properties,
        _specs,
        _labels,
        _goodsSId,
        _goodsSpecSId,
        _propertys,
        _price
      })
    }
  }
  /**
   * @description 选择规格弹窗中操作加入购物车
   */
  const specAddShoppingCart = () => {
    // 商品当前选项是否重复是否计数
    if (!currentGoods) return
    const {
      _goodsSId,
      _goodsSpecSId,
      _propertys,
      _price,
      _labels,
      goodsName: _goodsName
    } = currentGoods
    // 查找购物车是否有相同商品
    const repeatGoodsIndex = cartFormData.findIndex(item => {
      return (
        _goodsSId === item._goodsSId &&
        _goodsSpecSId === item._goodsSpecSId &&
        JSON.stringify(_propertys) === JSON.stringify(item._propertys)
      )
    })
    if (repeatGoodsIndex > -1) {
      cartFormData[repeatGoodsIndex]._goodsNum++
      cartFormData[repeatGoodsIndex]._goodsName = _goodsName
      cartFormData[repeatGoodsIndex]._labels = _labels
      // 加入购物车时过滤currentGoods数据，筛选出购物车中的条目数据
      setCartFormData([...cartFormData])
    } else {
      setCartFormData([
        ...cartFormData,
        {
          _goodsSId,
          _goodsNum: 1,
          _goodsName,
          _goodsSpecSId,
          _propertys,
          _labels: [..._labels],
          _price
        }
      ])
    }
  }
  /**
   * @description 根据购物车商品是否展示减号和数量
   */
  const renderJianAndNum = goodsSId => {
    const goodsIndex = cartFormData.findIndex(item => {
      return item._goodsSId === goodsSId
    })
    if (goodsIndex > -1) {
      return (
        <Fragment>
          <View
            className={styles.jian}
            onClick={e => {
              e.stopPropagation()
              clickCartCount(cartFormData[goodsIndex], goodsIndex)
            }}
          >
            -
          </View>
          <View className={styles.count}>
            {cartFormData[goodsIndex]._goodsNum}
          </View>
        </Fragment>
      )
    }
  }

  /**
   * @description 结算按钮和起送按钮
   */
  const renderSettleAccountsAndStart = () => {
    if (shopInfo.startPrice > 0) {
      if (cartTotalPrice >= shopInfo.startPrice && cartTotalNum > 0) {
        return (
          <View
            className={`${styles.settlement} ${styles.active}`}
            onClick={submitOrder}
          >
            去结算
          </View>
        )
      } else {
        return (
          <View className={styles.settlement}>
            ￥{shopInfo.startPrice}元起送
          </View>
        )
      }
    } else {
      return (
        <View
          className={`${styles.settlement} ${
            cartTotalNum ? styles.active : ''
          }`}
          onClick={submitOrder}
        >
          去结算
        </View>
      )
    }
  }

  /**
   * @description 点击加号添加菜品到购物车
   */
  const clickAddShoppingCart = (item, e) => {
    e.stopPropagation()
    const { detail } = e
    const { goodsSId, goodsPrice, _labels = [] } = item
    // 点击加号添加菜品，过滤currentGoods数据添加到FormData数据中,用于在购物车中展示条目数据
    const repeatGoodsIndex = cartFormData.findIndex(item => {
      return item._goodsSId === goodsSId
    })
    if (repeatGoodsIndex > -1) {
      cartFormData[repeatGoodsIndex]._goodsNum++
      cartFormData[repeatGoodsIndex]._goodsName = item.goodsName
      setCartFormData([...cartFormData])
    } else {
      setCartFormData([
        ...cartFormData,
        {
          _goodsSId: goodsSId,
          _goodsNum: 1,
          _goodsName: item.goodsName,
          _goodsSpecSId: 0,
          _propertys: [],
          _labels,
          _price: goodsPrice
        }
      ])
    }

    setLaunchXY({x: detail.x, y: detail.y - 25})
    setShowBall(true)
  }

  /**
   * @description 购物车增加删除商品
   */
  const clickCartCount = (cart, index, action: string = '') => {
    if (action === 'add') {
      cartFormData[index]._goodsNum += 1
      setCartFormData([...cartFormData])
    } else {
      if (cart._goodsNum > 1) {
        cartFormData[index]._goodsNum--
        setCartFormData([...cartFormData])
      } else {
        cartFormData.splice(index, 1)
        setCartFormData([...cartFormData])
      }
    }
  }

  /**
   * @description 点击操作按钮是区分是增加还是减少
   */
  const clickCollect = () => {
    const api = isCollect ? cancelCollect : addCollect
    api({ shopId: routerParams.shopId }).then(() => {
      setIsCollect(!isCollect)
    })
  }
  /**
   * @description 点击商品卡片，弹出浮层
   */
  const clickGoodsCard = listItem => {
    setBigCurrentGoods(listItem)
    setShowBigShopDetail(true)
  }

  /**
   * @description 滑动页面时切换tabindex
   */
  const tabsChange = ({ detail: { current } }) => {
    setCurrentIndex(current)
  }

  /**
   * @description 初始化获取菜单分类对应的列表的scrollTop，用于滑动时自定切换菜单
   */
  const getCardSectionScrollTop = async () => {
    const a: any = await new Promise(resolve => {
      Taro.createSelectorQuery()
        .select('#swiperDom')
        .boundingClientRect(res => {
          resolve(res)
        })
        .exec()
    })
    setSwipeDomTop(a.top)
  }

  /**
   * @description 列表滚动事件
   */
  const scrollMenulist = () => {
    setTimeout(() => {
      Taro.createSelectorQuery()
        .selectAll('.cardSection')
        .boundingClientRect((res: any = []) => {
          let index = -1
          for (let i = 0; i < res.length; i++) {
            if (res[i].top <= swipeDomTop) {
              index++
            } else {
              break
            }
          }
          if (index !== menuIndex) {
            setMenuIndex(index)
          }
        })
        .exec()
    }, 300)
  }

  // 清空该选择的优惠券或红包
  const clearCouponOrRedPack = () => {
    dispatch({
      type: 'DEL_COUPONID',
      payload: {
        couponId: ''
      }
    })
    dispatch({ type: 'DEL_REDPACK_ID' })
  }

   /**
   * @description 初始化获取目标元素坐标
   */
    const getTargetDom = async () => {
      const a: any = await new Promise(resolve => {
        Taro.createSelectorQuery()
          .select('#targetBox')
          .boundingClientRect(res => {
            resolve(res)
          })
          .exec()
      })
      const left = a.left + Math.floor(a.width / 2) - 10
      console.log('getTargetDom', {x: left, y: a.top})
      setTargetXY({x: left, y: a.top})
    }

  // 点击确定选择配送方式
  const confirmOrderWay = () => {
    goSubmitOrderPage({
      ...submitCartInfo,
      deliveryType: orderWay
    })
  }

  useEffect(() => {
    if (menuList.length) {
      Taro.nextTick(async () => {
        getCardSectionScrollTop()
        await getTargetDom()
      })
    }
  }, [menuList])

  useEffect(() => {
    setCartTotalPrice(
      cartFormData.reduce(function(prev, { _price = 0, _goodsNum = 1 }) {
        return (
          (Math.ceil(_price * 100) * _goodsNum + Math.ceil(prev * 100)) / 100
        )
      }, 0)
    )
    setCartTotalNum(
      cartFormData.reduce(function(prev, { _goodsNum = 0 }) {
        return prev + _goodsNum
      }, 0)
    )
  }, [cartFormData])

  useEffect(() => {
    if (openSpecs) {
      handleSpecData({ goodsSId: currentGoods.goodsSId })
    } else {
      setCurrentGoods({})
    }
  }, [openSpecs])

  useEffect(() => {
    getGoodsInfo()
  }, [getGoodsInfo])

  useEffect(() => {
    getShopComment()
  }, [getShopComment])

  useDidShow(() => {
    clearCouponOrRedPack()
  })

  useEffect(() => {
    const {
      statusBarHeight,
      navBarHeight,
      navBarExtendHeight
    } = Taro.globalSystemInfo
    setBigShopTop(
      navBarHeight + navBarExtendHeight + statusBarHeight + navBarExtendHeight
    )
  }, [])
  return (
    <View className={styles.detail}>
      {!showBigShopDetail && (
        <NavBar
          renderCenter={renderCenter}
          background='#transparent'
          color='#ffffff'
        />
      )}
      <View className={styles.info}>
        <Image
          src={shopInfo.plaqueImageUrl}
          className={`${styles.storeImage} ${
            !shopInfo.businessStatus ? styles.gray : ''
          }`}
          mode='scaleToFill'
        />
        <View className={styles.topInfo}>
          <Image
            src={shopInfo.shopImageUrl}
            className={`${styles.header} ${
              !shopInfo.businessStatus ? styles.gray : ''
            }`}
            mode='widthFix'
          />
          <View className={styles.text}>
            <View className={styles.top}>
              <View className={styles.name}>{shopInfo.shopName}</View>
              <View className={styles.collect} onClick={() => clickCollect()}>
                {isCollect ? (
                  <AtIcon
                    className={styles.star2}
                    value='star-2'
                    size='20'
                    color='#ffc746'
                  ></AtIcon>
                ) : (
                  <AtIcon
                    className={styles.star}
                    value='star'
                    size='20'
                    color='#ffffff'
                  ></AtIcon>
                )}
              </View>
            </View>
            <View className={styles.desc}>{shopInfo.shopNotice}</View>
          </View>
        </View>
      </View>
      {shopInfo.activities.length ? (
        <View className={styles.activity}>
          <View className={styles.label}>
            {flag(shopInfo.activities[0].type)}
            {shopInfo.activities[0].desc}
          </View>
          <View className={styles.more} onClick={() => setOpenCoupon(true)}>
            {`${shopInfo.activities.length}个活动>>`}
          </View>
        </View>
      ) : (
        <View className={styles.activity}></View>
      )}
      {shopInfo.activities.length ? (
        <AtFloatLayout
          className={styles.activityList}
          isOpened={openCoupon}
          onClose={() => setOpenCoupon(false)}
        >
          {shopInfo.activities.map((item, index) => {
            return (
              <View className={`${styles.coupon}`} key={`activities-${index}`}>
                {flag(item.type)}
                {item.desc}
              </View>
            )
          })}
        </AtFloatLayout>
      ) : null}
      <View className={styles.tabs}>
        {tabList.map((item, index) => {
          return (
            <View
              className={currentIndex === index ? styles.active : styles.tab}
              onClick={() => setCurrentIndex(index)}
              key={`tab-${index}`}
            >
              {item}
            </View>
          )
        })}
        {shopInfo.hasJobPosition && (
          <Image src={PinIcon} className={styles.lightImg} />
        )}
      </View>
      <Swiper
        id='swiperDom'
        className={styles.swipeTabContainer}
        current={currentIndex}
        duration={200}
        onChange={tabsChange}
      >
        <SwiperItem className={styles.swiperItem}>
          <View className={styles.menuList}>
            <View className={styles.menuTab}>
              <View>
                {menuList.map((item, index) => {
                  return (
                    <View
                      className={`${styles.tabItem} ${
                        menuIndex === index ? styles.active : ''
                      }`}
                      key={item.cateSId}
                      onClick={() => clickMendTab(index)}
                    >
                      {item.cateName}
                    </View>
                  )
                })}
              </View>
            </View>
            <View className={styles.menuCards}>
              <ScrollView
                scrollY
                enhanced
                enableFlex
                showScrollbar={false}
                scrollTop={cardScrollTop}
                scrollWithAnimation
                scrollAnchoring
                scrollIntoView={scrollDom}
                onScroll={() => scrollMenulist()}
                className={styles.menuScrollViewContainer}
              >
                {menuList.map((item, index) => {
                  return item.goods.length ? (
                    <View id={`cardTitle-${index}`} className='cardSection'>
                      <View className={styles.cardTitle} key={item.cateSId}>
                        {item.cateName}
                      </View>
                      {item.goods.map((listItem, index) => {
                        return (
                          <View
                            key={index}
                            className={`${styles.card} ${
                              item.goods.length - 1 === index
                                ? styles.noBorder
                                : ''
                            }`}
                          >
                            <View className={styles.imgBox} onClick={() => clickGoodsCard(listItem)}>
                              <Image
                                className={styles.img}
                                src={listItem.goodsImageUrl}
                                mode='scaleToFill'
                              />
                            </View>
                            <View className={styles.cardInfo}>
                              <View className={styles.title}>
                                {listItem.goodsName}
                              </View>
                              <View className={styles.desc}>
                                {listItem.goodsDesc}
                              </View>
                              <View className={styles.bottom}>
                                <View className={styles.price}>
                                  ￥{listItem.goodsPrice}
                                </View>
                                {listItem.specs.length ||
                                listItem.properties.length ? (
                                  <View
                                    className={styles.select}
                                    onClick={e => {
                                      e.stopPropagation()
                                      clickSpecsButton(listItem)
                                    }}
                                  >
                                    选规格
                                  </View>
                                ) : (
                                  <View className={styles.listItemOperate}>
                                    {renderJianAndNum(listItem.goodsSId)}
                                    <View
                                      className={styles.add}
                                      onClick={e => { clickAddShoppingCart(listItem, e)}}
                                    >
                                      +
                                    </View>
                                  </View>
                                )}
                              </View>
                            </View>
                          </View>
                        )
                      })}
                    </View>
                  ) : null
                })}
              </ScrollView>
            </View>
          </View>
          <View className={styles.shoppingCard}>
            <View className={styles.cardImg}>
              {cartTotalNum ? (
                <View className={styles.flag}>{cartTotalNum}</View>
              ) : null}
              <Image
                className={styles.img}
                src={Boolean(cartTotalNum) ? myCard2Image : myCard1Image}
                mode='scaleToFill'
                onClick={() => setShowCartLayout(Boolean(cartTotalNum))}
              />
            </View>
            <View className={styles.text}>
              {cartTotalNum ? `￥${cartTotalPrice}` : '未选择商品'}
            </View>
            {renderSettleAccountsAndStart()}
          </View>
        </SwiperItem>
        <SwiperItem className={styles.swiperItem}>
          <ScrollView
            className={styles.commentContainer}
            scrollY
            onScrollToLower={() => {
              !isLoadFinish && setPageNo(pageNo + 1)
            }}
          >
            {shopCommentList.map((comment, index) => {
              return (
                <CommentItem
                  key={index}
                  userPhoto={comment.userPhoto}
                  createTime={comment.createTime}
                  cellPhone={comment.cellPhone}
                  content={comment.content}
                  isReply={comment.replyContent}
                />
              )
            })}
            {shopCommentList.length && isLoadFinish ? <NoMore /> : null}
            {/* 暂无数据 */}
            {!shopCommentList ||
              (!shopCommentList.length && (
                <van-empty description='暂无数据' image={NoDataIcon} />
              ))}
          </ScrollView>
        </SwiperItem>
        <SwiperItem className={styles.swiperItem}>
          <View className={styles.shopInfoList}>
            <View
              className={styles.shopInfoItem}
              onClick={() =>
                Taro.makePhoneCall({
                  phoneNumber: shopInfo.shopPhone
                })
              }
            >
              <View className={styles.baseBox}>
                <Image src={LocationIcon} className={styles.shopInfoItemImg} />
                <View className={styles.title}>{shopInfo.detailAddress}</View>
              </View>
              <AtIcon
                value='phone'
                size='26'
                color='#666'
                className={styles.iconStyle}
              ></AtIcon>
            </View>
            <View
              className={styles.shopInfoItem}
              onClick={() => setShowRecruitModal(true)}
            >
              <View className={styles.baseBox}>
                <Image src={Zhaopin} className={styles.shopInfoItemImg} />
                <View className={styles.title}>招聘信息</View>
              </View>
              <AtIcon
                value='chevron-right'
                size='26'
                color='#666'
                className={styles.iconStyle}
              ></AtIcon>
            </View>
            <View className={styles.shopInfoItem}>
              <View className={styles.baseBox}>
                <Image src={Timestamp} className={styles.shopInfoItemImg} />
                <View className={styles.title}>营业时间</View>
              </View>
              <View
                className={styles.timestamp}
              >{`${shopInfo.businessBeginTime}-${shopInfo.businessEndTime}`}</View>
            </View>
          </View>
        </SwiperItem>
      </Swiper>

      {/* 规格弹窗 */}
      <View
        className={`${styles.specModal} ${
          !openSpecs ? styles.hideSpecModal : styles.showSpecModal
        }`}
        onTouchMove={() => {}}
      >
        <View className={styles.container}>
          <View className={styles.specModalTitle}>
            {currentGoods.goodsName}
          </View>
          <View className={styles.close} onClick={() => setOpenSpecs(false)}>
            ×
          </View>
          {currentGoods.properties
            ? currentGoods.properties.map(item => {
                return (
                  <View
                    className={styles.propertySection}
                    key={item.propertySId}
                  >
                    <View className={styles.propertiesTitle}>
                      {item.propertyName}
                    </View>
                    <View className={styles.propertiesLabel}>
                      {item.propertyValues.map(value => {
                        return (
                          <View
                            className={`${styles.value} ${
                              value.isCheck ? styles.active : ''
                            }`}
                            key={value.valueSId}
                            onClick={() =>
                              handleSpecData({
                                valueSId: value.valueSId
                              })
                            }
                          >
                            {value.propertyValue}
                          </View>
                        )
                      })}
                    </View>
                  </View>
                )
              })
            : null}
          {currentGoods.specs ? (
            <View className={styles.specSection}>
              <View className={styles.specTitle}>规格</View>
              <View className={styles.specLabel}>
                {currentGoods.specs.map(item => {
                  return (
                    <View
                      className={`${styles.value} ${
                        item.isCheck ? styles.active : ''
                      }`}
                      key={item.specSId}
                      onClick={() =>
                        handleSpecData({
                          specSId: item.specSId
                        })
                      }
                    >
                      {item.specName}
                    </View>
                  )
                })}
              </View>
            </View>
          ) : null}
          <View className={styles.bottomBox}>
            <View className={styles.price}>￥{currentGoods._price}</View>
            <View
              className={styles.button}
              onClick={() => specAddShoppingCart()}
            >
              加入购物车
            </View>
          </View>
        </View>
      </View>
      {/* 购物和弹框 */}
      <AtFloatLayout
        isOpened={showCartLayout}
        onClose={() => setShowCartLayout(false)}
      >
        <View className={styles.cartLayoutContainer}>
          <View className={styles.cartLayoutHeader}>
            <View
              className={styles.closeBtn}
              onClick={() => setShowCartLayout(false)}
            >
              ×
            </View>
            <View
              className={styles.clearBtn}
              onClick={() => {
                setCartFormData([])
                setShowCartLayout(false)
              }}
            >
              清空购物车
            </View>
          </View>
          <View className={styles.cartList}>
            {cartFormData.map((cart, index) => {
              return (
                <View className={styles.cartItem} key={index}>
                  <View className={styles.cartItemName}>
                    <View className={styles.name}>{cart._goodsName}</View>
                    <View className={styles.specs}>
                      {cart._labels.length ? `(${cart._labels.join(' ')})` : ''}
                    </View>
                    <View className={styles.price}>￥{cart._price}</View>
                  </View>
                  <View className={styles.cartItemOperate}>
                    <View
                      className={styles.jian}
                      onClick={() => clickCartCount(cart, index)}
                    >
                      -
                    </View>
                    <View className={styles.count}>{cart._goodsNum}</View>
                    <View
                      className={styles.add}
                      onClick={() => clickCartCount(cart, index, 'add')}
                    >
                      +
                    </View>
                  </View>
                </View>
              )
            })}
          </View>
        </View>
      </AtFloatLayout>
      {/* 商品大图详情 */}
      <View
        className={styles.bigShopImg}
        style={{
          display: showBigShopDetail ? 'block' : 'none',
          paddingTop: bigShopTop
        }}
      >
        <View
          className={styles.close}
          onClick={() => setShowBigShopDetail(false)}
        >
          ×
        </View>
        <View className={styles.imgs}>
          <Image
            className={styles.img}
            src={bigCurrentGoods.goodsImageUrl}
            mode='scaleToFill'
          />
        </View>
        <View className={styles.title}>{bigCurrentGoods.goodsName}</View>
        {bigCurrentGoods.properties && (
          <View className={styles.action}>
            <View className={styles.price}>￥{bigCurrentGoods.goodsPrice}</View>
            {bigCurrentGoods.properties.length ? (
              <View
                className={styles.select}
                onClick={e => {
                  e.stopPropagation()
                  clickSpecsButton(bigCurrentGoods)
                }}
              >
                选规格
              </View>
            ) : (
              <View className={styles.listItemOperate}>
                <View
                  className={styles.add}
                  onClick={e => {
                    e.stopPropagation()
                    clickAddShoppingCart(bigCurrentGoods)
                  }}
                >
                  +
                </View>
              </View>
            )}
          </View>
        )}
        <View className={styles.descTitle}>商品描述</View>
        <View className={styles.descText}>{bigCurrentGoods.goodsDesc}</View>
      </View>
      {/* 吸底购物车组件 */}
      <View
        className={styles.shoppingCard}
        style={{ display: currentIndex === 0 ? 'flex' : 'none' }}
      >
        <View className={`${styles.cardImg} ${cartShark ? styles.cartShark : ''}`}  id='targetBox'>
          {cartTotalNum ? (
            <View className={styles.flag}>{cartTotalNum}</View>
          ) : null}
          <Image
            className={styles.img}
            src={Boolean(cartTotalNum) ? myCard2Image : myCard1Image}
            mode='scaleToFill'
            onClick={() => setShowCartLayout(Boolean(cartTotalNum))}
          />
        </View>
        <View className={styles.text}>
          {cartTotalNum ? `￥${cartTotalPrice}` : '未选择商品'}
        </View>
        {renderSettleAccountsAndStart()}
      </View>
      {/* 招聘信息弹框 */}
      <AtFloatLayout
        isOpened={showRecruitModal}
        title='招聘信息'
        onClose={() => setShowRecruitModal(false)}
      >
        {shopInfo.concurrentPost || '暂无招聘信息'}
      </AtFloatLayout>
      <FlyBall
        startXY={launchXY}
        targetXY={targetXY}
        showBall={showBall}
        moveFinish={() => {
          setShowBall(false)
          setCartShark(true)
          setTimeout(() => setCartShark(false), 1000)
        }}
      />
      {/* 选择下单方式 */}
      <View
        className={`${styles.slectOrderWay} ${showOrderWay ? styles.showModal : styles.hideModal}`}
        onClick={() => setShowOrderWay(false)}
      >
          <View className={styles.selectWay} onClick={(e) => e.stopPropagation()}>
            <View className={styles.title}>
              <Image src={AppIcon} className={styles.appIcon} />
              <View className={styles.t}>选择配送方式</View>
            </View>
            {
              orderWayList.map((way,index) => {
                return (
                  <View className={styles.option} key={index} onClick={() => setOrderWay(way.typeId)} >
                    <View className={styles.selectBar}>
                    {
                      orderWay === way.typeId
                        ? <Image src={SelectedIcon} className={styles.selecttedIcon} />
                        : <View className={styles.notSelected} />
                    }
                    </View>

                    <View className={styles.t}>{way.typeName}</View>
                  </View>
                )
              })
            }
            <View className={styles.confirmBtn}>
              <View className={styles.name} onClick={confirmOrderWay}>确定</View>
            </View>
          </View>
      </View>
    </View>
  )
}

export default connect(null, dispatch => ({
  dispatch
}))(Detail)
